<template>
	<view class="booking">
		<view class="item-container">
			<!-- 图片 -->
			<image class="item-image" :src="houseDetials.image[0]" mode="aspectFill"></image>

			<view class="left-item">
				<!-- 标题 -->
				<view class="item-title">{{ houseDetials.contractType }}</view>


				<!-- 地址 -->
				<view class="item-address">{{ houseDetials.address }}</view>

				<!-- 特点 -->
				<view class="item-feature-box">
					<!-- <view class="item-feature" v-for="(feature, index) in item.features" :key="index">
							{{feature}}
						</view> -->
					<view class="item-feature">
						
						{{ houseDetials.nature }}
					</view>
					<view class="item-feature">
						{{ houseDetials.usageArea }}m²
					</view>
				</view>

				<!-- 价格 -->
				<view class="item-buttom">
					<view class="item-price">{{ houseDetials.price }}</view>
					<view class="item-unit">元/月</view>
				</view>
			</view>

			<!-- 分割线 -->
			<view class="item-viewider"></view>
		</view>
		<view v-if="isBooking">
			<view class="container">
				 <view class="view">
					<view class="icon">✓</view>
					<view class="text">预约已完结 <span class="time">{{getTime(bookingInfo1.finishDate)}}</span></view>
				</view>
				<view class="view">
					<view class="icon">👁️</view>
					<view class="text">租客已看房： <span class="time">{{getTime(bookingInfo1.lookDate)}}</span> 你已到达房源看房</view>
				</view>
				<view class="view">
					<view class="icon">✔️</view>
					<view class="text">已接收： <span class="time">{{getTime(bookingInfo1.acceptDate)}}</span> 房东已确认预约</view>
				</view> 
				<view class="view">
					<view class="icon">📅</view>
					<view class="text">
						<view>租客发起预约 <span class="time">{{getTime(bookingInfo1.createDate)}}</span> </view>
						<view>看房时间 <span class="time">{{getTime(bookingInfo1.bookingTime)}} </span> </view>
					</view>
				</view>
				<view class="looking-box">
					<view>再次预约</view> 
					<view><button type="submit" :disabled="isDisabled">确认已看房</button></view>
				</view>
			</view>
		</view>
		<view class="booking-container" v-else>
			<view class="booking-item">

				<label for="name">预约人</label>
				<input type="text" v-model="bookingParams.username" id="name" placeholder="请输入预约人" disabled>
			</view>
			<view class="booking-item">
				<label for="name">预约身份证</label>
				<input type="text" v-model="bookingParams.idCard" id="name" placeholder="预约身份证" disabled>
			</view>
			<view class="booking-item">
				<label for="phone">联系手机</label>
				<input type="text" v-model="bookingParams.phone" id="phone" placeholder="请填写手机号码">
			</view>
			<view class="booking-item">

				<label for="time">看房时间</label>
				<uni-datetime-picker type="datetime" :clear-icon="false" v-model="single" @change="change" />
			</view>
			<button @tap="changeBooking()">立即预约</button>
		</view>
	</view>

</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { getHouseDetails } from '../../services/contract';
import { HouseDetails } from '../../types/house';
import { commitBooking } from '../../services/booking';
import { useMemberStore } from '../../stores';
import type { BookingParams, BookingInfo } from '../../types/booking';
import {  ref } from 'vue';
const isBooking = ref()
let houseDetials = ref<HouseDetails>({})
let bookingInfo1 = ref<BookingInfo>({})
const memberStore = useMemberStore()
let contractId = ''
const single = ref()
const isDisabled=ref(true)
onLoad(async (option) => {
	if (option) {
		console.log(option)
		contractId = option.contractId
		if (memberStore.profile.userInfo.realName != null || memberStore.profile.userInfo.realName != null) {
			bookingParams.value.username = memberStore.profile.userInfo.realName
			bookingParams.value.idCard = memberStore.profile.userInfo.idCard
			bookingParams.value.houseId = option.houseId
			bookingParams.value.contractId = option.contractId
			const res = await getHouseDetails(option.contractId)
			houseDetials.value = res.data
			const {bookingInfo} = res.data
			bookingInfo1.value = bookingInfo
			isBooking.value = res.data.isBooking
		} else {
			uni.showModal({
				title: '请先进行实名认证',
				icon: 'none',
				success: (success) => {
					if (success.confirm) {
						uni.navigateTo({
							url: '/pages/authentication/authentication'
						});
					}
				},
			}
			);
			return
		}



	}
});

const getTime=(time:string)=>
{

	return time===null?'待定':time
}

const change = (e) => {

	bookingParams.value.bookingTime = single.value
}

const bookingParams = ref<BookingParams>(
	{
		username: '',
		phone: '',
		bookingTime: '',
		bookingStatus: 0,
		idCard: '',
		houseId: '',
		contractId: ''
	})
const changeBooking = () => {
	console.log(bookingParams.value)
	//判断表单
	if (bookingParams.value.username == '' || bookingParams.value.phone == '' || bookingParams.value.bookingTime == '') {
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none',
			duration: 2000
		})
		return
	}
	uni.showModal(
		{
			title: '确认预约',
			content: '确认预约？',
			success: (res) => {
				if (res.confirm) {
					console.log('用户点击确定');
					commitBooking(bookingParams.value)
						.then((res) => {
							if (res.code == 200) {
								isBooking.value = true
								uni.showToast({
									title: '预约成功',
									icon: 'success',
									duration: 2000
								})
							
							}
						})
				}
			}
		}
	)
	// isBooking.value = false;
}
</script>

<style lang="scss">
.item-container {
	width: 345px;
	height: 136px;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #fff;
}

.item-image {
	width: 130px;
	height: 90px;
	margin-right: 10px 0px;
	border-radius: 5px;
	margin-right: 10px;
	margin-left: 10px;
}

.item-address {
	display: flex;
}

.item-title {

	color: #333333;
	font-size: 16px;
	line-height: 20px;

}


.item-address {
	font-size: 12px;
	color: #666;
	margin-bottom: 5px;
}

.item-feature-box {
	display: flex;
}

.item-feature {
	font-size: 11px;
	color: rgba(76, 95, 163, 0.698039215686274);
	line-height: 15px;
	width: 50px;
	text-align: center;
	margin: 0 5px;
	background-color: #edeff6;
}

.item-buttom {
	display: flex;
}

.item-price {
	font-size: 16px;
	color: #f00;
	margin-bottom: 5px;
}

.item-unit {
	font-size: 12px;
	color: #666;
}

.item-viewider {
	border-top: 1px solid #eee;
	margin-top: 5px;
}

// 加载提示文字
.loading-text {
	text-align: center;
	font-size: 28rpx;
	color: #666;
	padding: 20rpx 0;
}

.booking-item {
	display: flex;

	input {
		width: 100%;
		height: 100%;


	}

}

.container {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	padding: 20px;
	max-width: 600px;
	margin: auto;
}

.view {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	padding: 10px;
	border-left: 4px solid #007bff;
	background-color: #e9f5ff;
	border-radius: 4px;
}

.icon {
	width: 24px;
	height: 24px;
	background-color: #007bff;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.text {
	font-size: 14px;
	color: #333;
}

.time {
	font-size: 12px;
	color: #666;
}

.booking-container {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 400px;
	padding: 20px;
}

.booking-item {
	margin-bottom: 15px;
}

.booking-item label {
	display: block;
	margin-bottom: 5px;
	width: 100px;

	color: #333;
}

.booking-item input {
	width: 100%;
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}

.booking-item input::placeholder {
	color: #888;
}

button {
	width: 100%;
	background-color: #28a745;
	border: none;
	border-radius: 4px;
	color: white;
	font-size: 16px;
	cursor: pointer;
}

button:hover {
	background-color: #218838;
}
.looking-box
{
	display: flex;
}
</style>